<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_2614180_av35m3g5bqq.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        img {
            vertical-align: top;
        }

        .swiper {
            width: 1226px;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
            user-select: none;

            .swiper-wrapper {
                display: flex;
                width: fit-content;
                position: relative;

                .swiper-item {
                    width: 1226px;

                    & img {
                        width: 100%;
                    }
                }
            }

            .swiper-pagination {
                display: flex;
                position: absolute;
                right: 50px;
                bottom: 20px;

                & li {
                    width: 15px;
                    height: 15px;
                    border-radius: 50%;
                    background-color: aliceblue;
                    border: 1px solid rgba(0, 0, 0, 0.5);
                    margin: 0 5px;

                }

                .active {
                    background-color: aquamarine;
                }
            }

            /* .swiper:hover */
            &:hover {

                /* .swiper:hover .prev */
                .prev,
                .next {
                    opacity: 1;
                }
            }

            .prev,
            .next {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                z-index: 1;
                font-size: 50px;
                color: aquamarine;
                opacity: 0;
                transition: all 0.5s;

            }

            .prev {
                left: 5px;
            }

            .next {
                right: 5px;
            }


        }
    </style>
</head>

<body>
    <div class="swiper">
        <i class="prev iconfont icon-zuo1"></i>
        <i class="next iconfont icon-you2"></i>
        <div class="swiper-wrapper">
            <div class="swiper-item"><img draggable="false" src="../images/1.webp" alt=""></div>
            <div class="swiper-item"><img draggable="false" src="../images/2.webp" alt=""></div>
            <div class="swiper-item"><img draggable="false" src="../images/3.webp" alt=""></div>
            <div class="swiper-item"><img draggable="false" src="../images/4.webp" alt=""></div>
            <!-- 第五张 -->
            <div class="swiper-item"><img draggable="false" src="../images/1.webp" alt=""></div>
        </div>
        <ul class="swiper-pagination">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
<script src="../js/animate.js"></script>
<script>
    /* 
        轮播实现步骤
        1. 点击切换
            (1) 四张图片对应四个导航(点)  => 一一对应
            (2) 点第n个导航 显示第n张图片 => swiperWrapper需要向左滚动n-1一张图片(和导航对应的下标对应)

        2. 自动切换
        3. 移入暂停,移出启动
        4. 点击切换
        5. 拖拽切换
    
    
    */

    var swiper = document.querySelector(".swiper");
    var swiperWrapper = document.querySelector(".swiper-wrapper");
    var liList = document.querySelectorAll(".swiper-pagination li");
    var prev = document.querySelector(".prev");
    var next = document.querySelector(".next");

    var swiperWidth = swiper.clientWidth;
    var index = 0; // 全局变量 记录轮播的下标(默认显示第一张)
    var timer = null;

    // 页面加载时启动自动轮播
    autoPlay();

    // 点击切换
    for (let i = 0; i < liList.length; i++) {
        let li = liList[i];
        li.onclick = function () {

            index = i; // 点击切换时,同步自动轮播下标 => 下次轮播从当前位置开始
            step();
        }
    }

    // 移入暂停,移出启动
    swiper.onmouseenter = function () {
        clearInterval(timer);
    }

    swiper.onmouseleave = function () {
        autoPlay()
    }

    swiper.onmousedown = function(e){
        var posStart = e.pageX;

        swiper.onmouseup = function(e){
            var posEnd = e.pageX;

            if(posEnd - posStart > 0 && Math.abs(posEnd - posStart) >= 50){
                console.log("向右拖拽");
                index -- ;
                step()
            }else if(posEnd - posStart < 0  && Math.abs(posEnd - posStart) >= 50){
                index ++;
                console.log("向左拖拽");
                step()
            }

        }

    }



    // 点击切换

    // 点击切换下一张
    prev.onclick = function () {
        index--;
        step();
    }

    // 点击切换下一张
    next.onclick = function () {
        index++;
        step();
    }


    function autoPlay() {
        // 自动切换  
        clearInterval(timer);
        timer = setInterval(function () {
            index++;
            step();
        }, 3000)
    }

    function step() {
        // 0 1 2 3 4 (5张)

        // 小于最小值
        if (index < 0) {
            index = liList.length; // index = 4 // 第五张下标
            swiperWrapper.style.left = -index * swiperWidth + "px";

            index--; // index = 3  => 后续会执行animate()  滚动到第四张
        }

        // next 连续点击 => animate()短时间内重复调用, 默认会先清除上一次,再启动下一次(上一次运动结束之后,回调函数也不会执行) =>  无法实现第四张滚动到第五张切换到第一张

        // 怎么解决?   => 添加临界值判断(大于最大值), 超出临界值之后直接到第二张 (因为第五张图片同第一张, 切换到第五张时用户看起来就像第一张, 所以超出第五张之后,应该滚动到第二张)   => 障眼法
        // 解决方式:  判断index如果超出第五张,就通过JS直接将其切换到第一张,在滚动到第二张

        // 超出最大值
        if (index > liList.length) { //  index > 4  超出第五张
            swiperWrapper.style.left = 0;  // 超出第五张,直接切换到第一张
            index = 0;  // 重置下标到第一张

            index++; // 滚动到第二张
        }

        // 导航切换
        for (var j = 0; j < liList.length; j++) {
            liList[j].className = "";
        }
        // 判断是否是第五张,把第一个导航变为活跃状态
        var activeIndex = index >= liList.length ? 0 : index;
        liList[activeIndex].className = "active";

        // 图片轮播
        animate(swiperWrapper, { left: -swiperWidth * index }, function () {
            if (index >= liList.length) { // index >= 4 =>如果是第五张  => 直接切换到第一张
                swiperWrapper.style.left = 0;
                index = 0;
            }
        });
    }





</script>

</html>